<template>
  <div class="fence">
    <div class="fence-style-body">
      <el-table
        :data="fenceData"
        style="width: 100%;background-color: rgba(1,1,1,0);"
        height="182px"
        stripe
        highlight-current-row
        :header-cell-style="{background:'#1C7CD5',color:'#fff'}"
        ref="fenceTable"
        @selection-change="handleCurrentChange"
        @row-click="handleCurrentChange"
      >
        <el-table-column
          prop="name"
          label="名称"
          width="160" height="20">
        </el-table-column>
        <el-table-column
          prop="valid"
          label="状态"
          width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.valid==1">生效</span>
            <span v-if="scope.row.valid==0">失效</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rule"
          width="80"
          label="围栏规则">
          <template slot-scope="scope">
            <span v-if="scope.row.rule==1">禁入</span>
            <span v-if="scope.row.rule==0">禁出</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startTime"
          width="80"
          label="生效时间">
        </el-table-column>
        <el-table-column
          prop="endTime"
          width="80"
          label="失效时间">
        </el-table-column>
        <el-table-column
          prop="type"
          width="80"
          label="围栏类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type==1">全局</span>
            <span v-if="scope.row.type==0">局部</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button type="success" @click="editFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#1c7cd5;width: 36px;height:20px;font-size: 12px;padding: 0" >编辑</el-button>
              <el-button type="info" @click="deleteFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#F33718;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px" >删除</el-button>
              <el-button v-if="scope.row.source==0 && (scope.row.points==null || scope.row.points == '')" type="info" @click="refFence(scope.$index, scope.row)" style="border:0px solid #1c7cd5;border-radius:2px;background-color:#398d8d;width: 36px;height:20px;font-size: 12px;padding: 0;margin: 2px" >刷新</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fence-add">
      <div style="width: 100px">
        <el-button size="mini" style="color:#1c7cd5;width: 100px;height: 24px;padding: 4px 3px" icon="el-icon-plus" @click="fenceadd">新增围栏</el-button>
      </div>
    </div>
    <div class="cone-list" :style="coneListStyle">
      <div style="font-size: 12px;color: #1C7CD5;padding-left: 3px;"> 请选择锥桶分组：</div>
      <el-radio-group v-model="fenceInfo.group" size="mini" style="padding-top: 5px">
        <el-radio :label="value.group" :key="value.key" v-for="(value, key, index) in conegroup" border>{{value.group}}-{{value.state==1?"已绑":"未绑"}}</el-radio>
      </el-radio-group>
    </div>
    <div class="fence-form" :style="fenceStyle">
      <el-form class="apply-form first-form" :model="fenceInfo" :rules="rules" ref="saveFenceForm">
        <input type="hidden" v-model="fenceInfo.id">
        <input type="hidden" v-model="fenceInfo.source">
        <input type="hidden" v-model="fenceInfo.group">
        <input type="hidden" v-model="fenceInfo.ptNum">
        <input type="hidden" v-model="fenceInfo.points">
        <span style="font-size: 12px;color:#888">点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制</span>
        <el-form-item label="名称:" prop="name">
        <el-input v-model="fenceInfo.name" size="mini" placeholder="请填写名称"></el-input>
        </el-form-item>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏状态:</div>
        <el-select v-model="fenceInfo.valid" size="mini" style="width: 180px;" placeholder="请选择围栏状态">
          <el-option :value="1" label="生效"></el-option>
          <el-option :value="0" label="失效"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏类型:</div>
        <el-select v-model="fenceInfo.type" size="mini" style="width: 180px;" placeholder="请选择围栏类型">
          <el-option :value="1" label="全局"></el-option>
          <el-option :value="0" label="局部"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>规则类型:</div>
        <el-select v-model="fenceInfo.rule" size="mini" style="width: 180px;" placeholder="请选择规则类型">
          <el-option :value="1" label="禁入"></el-option>
          <el-option :value="0" label="禁出"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>生效时间:</div>
        <el-time-picker
          v-model="fenceInfo.startTimeDate"
          style="width: 180px"
          size="mini"
          placeholder="开始时间"
          @change="startTimeChange">
        </el-time-picker>
        <el-time-picker
          v-model="fenceInfo.endTimeDate"
          style="width: 180px;margin-top: 4px"
          size="mini"
          placeholder="结束时间"
          @change="endTimeChange">
        </el-time-picker>
        <el-row style="display: inline-flex;width: 160px;">
          <div style="cursor:pointer" @click="drawPolygon"><img src="~@/assets/img/hz.png" style="height: 11px" /><span :style="typeStyle1">绘制</span></div>&nbsp;
          <div style="cursor:pointer;padding-left: 10px" @click="checkCone"><img src="~@/assets/img/tz.png" style="height: 11px"/><span :style="typeStyle2">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="fenceformcancle">取消</el-button>
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="fenceformadd('saveFenceForm')">新增</el-button>
        </el-row>
      </el-form>
    </div>
    <div class="fence-form-edit" :style="fenceEditStyle">
      <el-form class="apply-form first-form" :model="fenceInfo" :rules="rules" ref="editFenceForm">
        <input type="hidden" v-model="fenceInfo.id">
        <input type="hidden" v-model="fenceInfo.source">
        <input type="hidden" v-model="fenceInfo.group">
        <input type="hidden" v-model="fenceInfo.ptNum">
        <input type="hidden" v-model="fenceInfo.points">
        <span style="font-size: 12px;color:#888">点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制</span>
        <el-form-item label="名称:" prop="name">
        <el-input v-model="fenceInfo.name" size="mini" placeholder="请填写名称"></el-input>
        </el-form-item>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏状态:</div>
        <el-select v-model="fenceInfo.valid" size="mini" style="width: 180px;" placeholder="请选择围栏状态">
          <el-option :value="1" label="生效"></el-option>
          <el-option :value="0" label="失效"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>围栏类型:</div>
        <el-select v-model="fenceInfo.type" size="mini" style="width: 180px;" placeholder="请选择围栏类型">
          <el-option :value="1" label="全局"></el-option>
          <el-option :value="0" label="局部"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>规则类型:</div>
        <el-select v-model="fenceInfo.rule" size="mini" style="width: 180px;" placeholder="请选择规则类型">
          <el-option :value="1" label="禁入"></el-option>
          <el-option :value="0" label="禁出"></el-option>
        </el-select>
        <div style="font-size: 12px;color:#111;padding:8px 0"><span style="color:red;">* </span>生效时间:</div>
        <el-time-picker
          v-model="fenceInfo.startTimeDate"
          style="width: 180px"
          size="mini"
          placeholder="开始时间"
          @change="startTimeChange">
        </el-time-picker>
        <el-time-picker
          v-model="fenceInfo.endTimeDate"
          style="width: 180px;margin-top: 4px"
          size="mini"
          placeholder="结束时间"
          @change="endTimeChange">
        </el-time-picker>
        <el-row style="display: inline-flex;width: 160px;" v-if="fenceInfo.source=='0'">
          <div style="cursor:not-allowed" ><img src="~@/assets/img/hz.png" style="height: 11px" /><span style="font-size: 12px;color: #777">绘制</span></div>&nbsp;
          <div style="cursor:not-allowed;padding-left: 10px" ><img src="~@/assets/img/tz.png" style="height: 11px"/><span style="font-size: 12px;color: #1c7cd5">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 160px;" v-if="fenceInfo.source=='1'">
          <div style="cursor:not-allowed"><img src="~@/assets/img/hz.png" style="height: 11px" /><span style="font-size: 12px;color: #1c7cd5">绘制</span></div>&nbsp;
          <div style="cursor:not-allowed;padding-left: 10px"><img src="~@/assets/img/tz.png" style="height: 11px"/><span style="font-size: 12px;color: #777">锥桶</span></div>
        </el-row>
        <el-row style="display: inline-flex;width: 180px;padding-left: 80px;">
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;background-color: #888;color: #fff;" @click="fenceEditormcancle">取消</el-button>
          <el-button style="font-size:9px;width: 110px;height: 22px;padding: 1px;margin-left: 4px;background-color: #1C7CD5;color: #fff;" @click="fenceformsave('editFenceForm')">保存</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import AMap from 'AMap'
export default {
  name: "Fence",
  data(){
    const isNum = (rule, value, callback) => {
      const age = /^[A-Za-z0-9\u4e00-\u9fa5]{1,500}$/
      if (!age.test(value)) {
        callback(new Error('围栏名称不能输入特殊字符'))
      }else{
        callback()
      }
    }
    const lengthMax = (rule,value,callback) => {
      var temp = 0
      for (var i = 0; i < value.length; i++) {
        if (/[\u4e00-\u9fa5]/.test(value[i])) {
          temp += 2
        } else {
          temp++
        }
      }
      if (temp > 50) {
        callback(new Error('长度不能超过50个字符'))
      }else {
        callback()
      }
    }
    return {
      fenceStyle: 'display:none',
      coneListStyle:"display:none",
      fenceInfo:{
        id:"",
        source:"1",
        name:"",
        rule:1,
        valid:1,
        type:1,
        startTime:"00:00:00",
        endTime:"23:59:59",
        startTimeDate:"2008-01-01 00:00:00",
        endTimeDate:"2008-01-01 23:59:59",
        ptNum:0,
        points:"",
        group:"",
      },
      rules:{
        name: [
          { required: true, message: '请输入围栏名称', trigger: 'blur' },
          { required: true, message: '请输入围栏名称', trigger: 'change' },
          { validator: isNum,trigger: "blur"},
          { validator: lengthMax,trigger: "blur"},
        ]
      },
      fenceData: [],
      overlays: [],
      mouseTool:undefined,
      conegroup:[],
      fenceEditStyle:'display:none',
      fence:undefined,
      polygons:[],
      typeStyle1:'font-size: 12px;color: #777',
      typeStyle2:'font-size: 12px;color: #777',
      markPoint:[],
    }
  },
  mounted() {
    let _this = this

    this.axios.get("fence/listFences").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        _this.fenceData = result.result
      }
    }).catch(function (error) {
      console.log(error)
    })
    this.axios.get("cone/getGroup").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        _this.conegroup = result.result
      }
    }).catch(function (error) {
      console.log(error)
    })



  },
  beforeDestroy() {
    let _this = this
    _this.coneListStyle = "display:none"
    _this.fenceStyle = "display:none"
    _this.fenceEditStyle = "display:none"
    if(_this.overlays.length>0) {
      global.map.remove(_this.overlays)
      _this.overlays.splice(0,1)
      _this.overlays = []
    }
    global.map.setDefaultCursor('pointer');
    _this.removePol()
    _this.typeStyle1 = "font-size: 12px;color: #777"
    _this.typeStyle2 = "font-size: 12px;color: #777"
  },

  methods:{

    startTimeChange(val){
      this.fenceInfo.startTime = this.formatTime(val)
      this.fenceInfo.startTimeDate = this.format(val)
    },
    endTimeChange(val){
      this.fenceInfo.endTime = this.formatTime(val)
      this.fenceInfo.endTimeDate = this.format(val)
    },
    removePol(){
      let that = this
      if(that.polygons.length>0) {
        global.map.remove(that.polygons)
        that.polygons = []
        global.map.remove(that.markPoint)
        that.markPoint = []
      }
    },

    refFence(index,row){
      let that = this
      that.removePol()
      this.axios.get("fence/listFences").then(function (response) {
        let result = response.data
        that.$message({
          message: '锥桶围栏生成中，稍后刷新显示！',
          duration:2000,
          type: 'warning',
          offset: '300'
        });
        if(result.code=='200'){
          that.fenceData = result.result
        }
      }).catch(function (error) {
        console.log(error)
      })
    },

    handleCurrentChange(row, event, column){
      let that = this
      that.removePol()
      this.axios.get("fence/getFenceById?ID="+row.id).then(function (response) {
        let result = response.data
        console.log(result)
        if(result.code=='200'){
          let f = result.result
          row.ptNum = f.ptNum
          row.points = f.points
          if(row.ptNum>=3) {
            let weis = row.points
            let arrwei = weis.split(",");
            let po = []
            for (let j = 0; j < arrwei.length - 1; j++) {
              let p = [];
              p.push(arrwei[j])
              p.push(arrwei[++j])
              po.push(p)
            }

            //筒锥生成的围栏显示筒锥位置
            if (row.source == 0) {
              //是否圆形
              if (row.ptNum == 73) {
                let yuandian = []
                yuandian.push((parseFloat(arrwei[0]) + parseFloat(arrwei[72])) / 2)
                yuandian.push((parseFloat(arrwei[1]) + parseFloat(arrwei[73])) / 2)
                that.createMarkerPoint(yuandian)
              } else {
                for(let s=0;s<po.length;s++){
                  console.log(po)
                  that.createMarkerPoint(po[s])
                }
              }
            }

            let thisfence = new AMap.Polygon({
              path: po,
              strokeColor: "#1791fc",
              strokeWeight: 2,
              strokeOpacity: 0.2,
              fillOpacity: 0.5,
              fillColor: '#1791fc',
              zIndex: 50,
            })

            that.polygons.push(thisfence)
            global.map.add(thisfence)
            global.map.panTo(po[0])
            global.map.setZoom(17)
          }else{
            that.$message({
              message: '锥桶围栏未生成，请检查锥桶是否已开机！',
              duration:2000,
              type: 'warning',
              offset: '300'
            });
          }
        }
      }).catch(function (error) {
        console.log(error)
      })
    },
    createMarkerPoint(lnglat) {
      let icon = '/static/img/p.png'
      let marker = new AMap.Marker({
        map: global.map,
        icon: icon,
        position: new AMap.LngLat(lnglat[0], lnglat[1]),
        zIndex: 9,
        offset: new AMap.Pixel(-6, -6),
      });
      this.markPoint.push(marker);
    },
    editFence(index,row){
      this.removePol()
      this.refFence()
      row = JSON.parse(JSON.stringify(row))
      this.fenceStyle = "display:none"
      this.coneListStyle = "display:none"
      this.fenceEditStyle = "display:block"
      row.startTimeDate = '2008-01-01 '+row.startTime
      row.endTimeDate = '2008-01-01 '+row.endTime
      this.fenceInfo = row
      //显示围栏
      if(row.ptNum>=3){
        let weis = row.points
        let arrwei = weis.split(",");
        let po =[]
        for(let j=0;j<arrwei.length-1;j++){
          let p = [];
          p.push(arrwei[j])
          p.push(arrwei[++j])
          po.push(p)
        }
        let thisfence = new AMap.Polygon({
          path: po,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: '#1791fc',
          zIndex: 50,
        })

        //筒锥生成的围栏显示筒锥位置
        if (row.source == 0) {
          //是否圆形
          if (row.ptNum == 73) {
            let yuandian = []
            yuandian.push((arrwei[0]+arrwei[72])/2)
            yuandian.push((arrwei[1]+arrwei[73])/2)
            this.createMarkerPoint(yuandian)
          } else {
            for(let s=0;s<po.length;s++){
              this.createMarkerPoint(po[s])
            }
          }
        }

        this.polygons.push(thisfence)
        global.map.add(thisfence)
      }
    },
    deleteFence(index,row){
      let that = this
      that.coneListStyle = "display:none"
      that.fenceStyle = "display:none"
      that.fenceEditStyle = "display:none"
      that.removePol()
      that.$confirm('确定删除此电子围栏信息吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=> {
        this.removePol()
        that.axios.get("fence/deleteFence?id=" + row.id).then(function (response) {
          let result = response.data
          if (result.statusCode == '200') {
            that.$message({
              message: '删除数据成功！',
              duration:2000,
              type: 'success',
              offset: '300'
            });
            that.axios.get("fence/listFences").then(function (response) {
              let result = response.data
              if (result.code == '200') {
                that.fenceData = result.result
              }
            }).catch(function (error) {
              console.log(error)
            })
          }
        }).catch(function (error) {
          console.log(error)
        })
      }).catch(() => {
      })
    },
    fenceadd(){
      let that = this
      that.removePol()
      that.$refs.saveFenceForm.resetFields();
      that.fenceStyle = "display:block"
      that.coneListStyle = "display:none"
      that.fenceEditStyle = "display:none"
      that.fenceInfo.startTime="00:00:00"
      that.fenceInfo.endTime="23:59:59"
      that.fenceInfo.ptNum = 0
      that.fenceInfo.startTimeDate="2008-01-01 00:00:00"
      that.fenceInfo.endTimeDate="2008-01-01 23:59:59"
      that.typeStyle1 = "font-size: 12px;color: #777"
      that.typeStyle2 = "font-size: 12px;color: #777"
      that.$refs.fenceTable.setCurrentRow(null)
      that.axios.get("cone/getGroup").then(function (response) {
        let result = response.data
        if(result.code=='200'){
          that.conegroup = result.result
        }
      }).catch(function (error) {
        console.log(error)
      })
      that.fenceInfo.group = null
    },

    fenceClose(){
      if(this.polygons.length>0) {
        global.map.remove(this.polygons)
        this.polygons.splice(0)
        this.fence.splice(0)
        this.polygons = [];
        this.fence = [];
      }
    },
    fenceformcancle(){
      let _this = this
      if(_this.polygons>0)
        global.map.remove(_this.polygons)
      _this.fenceStyle = "display:none"
      _this.coneListStyle = "display:none"
      _this.mouseTool.close(true)
      if(_this.overlays.length>0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0,1)
        _this.overlays = []
      }
      global.map.setDefaultCursor('pointer');
      // this.$refs.saveFenceForm.resetFields();
      _this.typeStyle1 = "font-size: 12px;color: #777"
      _this.typeStyle2 = "font-size: 12px;color: #777"
    },
    fenceEditormcancle(){
      let _this = this
      _this.removePol()
      _this.fenceStyle = "display:none"
      _this.coneListStyle = "display:none"
      _this.fenceEditStyle = "display:none"
    },
    fenceformsave(editFenceForm){
      let _this = this
      _this.fenceInfo.startTimeDate = ''
      _this.fenceInfo.endTimeDate = ''
      _this.coneListStyle = "display:none"

      this.$refs.editFenceForm.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let formData = JSON.stringify(_this.fenceInfo);
          let jsonData = JSON.parse(formData)
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("fence/editFence", formData, config).then((res)=>{
            if(res.data.code == '200'){
              this.$message({
                message: '修改数据成功！',
                duration:2000,
                type: 'success',
                offset:'300'
              });
              _this.fenceStyle = "display:none"
              this.axios.get("fence/listFences").then(function (response) {
                let result = response.data
                if(result.code=='200'){
                  _this.fenceData = result.result
                  let r = 0;
                  if(_this.fenceData.length>0){
                    for(let s=0;s<_this.fenceData.length;s++){
                      console.log(_this.fenceData[s].id)
                      console.log(formData.id)
                      if(_this.fenceData[s].id == jsonData.id){
                        r=s
                        break
                      }
                    }
                  }
                  _this.$refs.fenceTable.setCurrentRow(_this.fenceData[r]);
                  console.log(_this.fenceData[r])
                  _this.playPoly(_this.fenceData[r])
                }
              }).catch(function (error) {
                console.log(error)
              })
            }
            if(_this.fence!=undefined){
              global.map.remove(_this.fence)
            }
            if(_this.overlays.length>0) {
              global.map.remove(_this.overlays)
              _this.overlays.splice(0,1)
              _this.overlays = []
            }
            _this.fenceEditStyle = "display:none"
          })
        }else{
        }
      })
    },
    playPoly(row){
      this.removePol()
      if(row.ptNum>=3) {
        let weis = row.points
        let arrwei = weis.split(",");
        let po = []
        for (let j = 0; j < arrwei.length - 1; j++) {
          let p = [];
          p.push(arrwei[j])
          p.push(arrwei[++j])
          po.push(p)
        }
        let thisfence = new AMap.Polygon({
          path: po,
          strokeColor: "#1791fc",
          strokeWeight: 2,
          strokeOpacity: 0.2,
          fillOpacity: 0.5,
          fillColor: '#1791fc',
          zIndex: 50,
        })
        this.polygons.push(thisfence)
        global.map.add(thisfence)
      }
    },
    fenceformadd(saveFenceForm){
      let _this = this
      _this.coneListStyle = "display:none"
      this.$refs.saveFenceForm.validate((valid) => {
        if(valid){
          /* json格式提交： */
          _this.fenceInfo.startTimeDate = ''
          _this.fenceInfo.endTimeDate = ''
          let formData = JSON.stringify(_this.fenceInfo);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("fence/saveFence", formData, config).then((res)=>{
            if(res.data.code == '200'){
              this.$message({
                message: '添加围栏数据成功',
                duration:2000,
                type: 'success',
                offset:'300'
              });
              _this.fenceStyle = "display:none"
              this.axios.get("fence/listFences").then(function (response) {
                let result = response.data
                if(result.code=='200'){
                  _this.fenceData = result.result
                  _this.$refs.fenceTable.setCurrentRow(_this.fenceData[0]);
                  _this.playPoly(JSON.parse(formData))
                }
              }).catch(function (error) {
                console.log(error)
              })

            }
            if(res.data.code=='500'){
              this.$message({
                message: res.data.message,
                duration:2000,
                type: 'warning',
                offset:'300'
              });
            }
            _this.fenceInfo.startTimeDate = '2008-01-01 00:00:00'
            _this.fenceInfo.endTimeDate = '2008-01-01 23:59:59'
            _this.fenceInfo.startTime = '00:00:00'
            _this.fenceInfo.endTime = '23:59:59'
          })
          if(_this.overlays.length>0) {
            global.map.remove(_this.overlays)
            _this.overlays.splice(0,1)
            _this.overlays = []
          }
        }else{
        }
      })
    },
    drawPolygon () {
      let _this = this
      _this.typeStyle1 = "font-size: 12px;color: #1c7cd5"
      _this.typeStyle2 = "font-size: 12px;color: #777"
      if(_this.fence!=undefined){
        global.map.remove(_this.fence)
      }
      _this.fenceInfo.source = "1";
      _this.coneListStyle = "display:none"
      this.$message({
        message: '点击鼠标左键按键绘制围栏，双击鼠标 左键结束绘制',
        duration:2000,
        type: 'success',
        offset:'300'
      });
      global.map.setDefaultCursor('crosshair');
      // global.map.setDefaultCursor('cursorHz');
      if(_this.overlays.length>0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0,1)
        _this.overlays = []
      }
      _this.mouseTool = new AMap.MouseTool(global.map)
      _this.mouseTool.polygon({
        strokeColor: "#1791fc",
        strokeWeight: 2,
        strokeOpacity: 0.2,
        fillOpacity: 0.5,
        fillColor: '#1791fc',
      })
      // 点击marker事件
      _this.mouseTool.on('draw', (e) => {
        _this.overlays[0] = e.obj;
        let path = e.obj.getPath()
        let points = ""
        path.forEach(e=>{
          points += e.getLng()+","
          points += e.getLat()+","
          console.log([e.getLng(),e.getLat()])

        })
        _this.fenceInfo.ptNum = path.length
        _this.fenceInfo.points = points
        _this.mouseTool.close(true)
        global.map.add(_this.overlays[0])
        global.map.setDefaultCursor('pointer');
      })
    },
    checkCone(){
      let _this = this
      _this.typeStyle2 = "font-size: 12px;color: #1c7cd5"
      _this.typeStyle1 = "font-size: 12px;color: #777"
      _this.removePol()
      _this.coneListStyle = "display:block"
      _this.fenceInfo.source = "0";
      this.$message({
        message: '您选择了锥桶定义围栏！',
        duration:2000,
        type: 'success',
        offset:'300'
      });
      if(_this.mouseTool != undefined && _this.mouseTool!={})
        _this.mouseTool.close(true)
      global.map.setDefaultCursor('pointer');
      if(_this.overlays.length>0) {
        global.map.remove(_this.overlays)
        _this.overlays.splice(0,1)
        _this.overlays = []
      }
    },

    format (cjsj) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
      var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
      var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
      var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
      return Y+M+D+h+m+s
    },

    formatTime (cjsj) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
      var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
      var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
      var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
      return h+m+s
    },
  },


}
</script>

<style scoped>
  .cone-list{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 200px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 380px;
    right: 14rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 190;
    height: 120px;
  }
  .el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 3px;
  }
  .el-radio.is-bordered+.el-radio.is-bordered {
     margin-left: 0px;
  }
  .fence-style-body {
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border-width: 0;
    position: fixed;
    top: 80px;
    left: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    border-radius: 0.2rem;
    z-index: 999;
    height: 180px;
    background-color:rgba(255,255,255,1);;
    width: 710px;
    padding: 2px;
  }
  .fence-style-body .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 30px;
  }
  .fence-style-body .el-table__body tr,
  .fence-style-body .el-table__body td {
    padding: 0;
    height: 30px;
  }

  .fence-style-body .el-table__row td{
    background-color: rgba(233,243,252,1);
  }
  .fence-style-body .el-table--striped .el-table__body tr.el-table__row--striped td {
    background-color: rgba(246,251,255,1);
  }
  .fence-style-body .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #d3faef;
    color: #118b9c;
  }

  .fence-style-body table tr:first-child th:first-child {
    border-top-left-radius: 4px;
  }

  .fence-style-body table tr:first-child th:last-child {
    border-top-right-radius: 4px;
  }
  .fence-style-body table tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
  }

  .fence-style-body table tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
  }

  /*修改滚动条样式*/
  div::-webkit-scrollbar{
    width:10px;
    height:10px;
    /**/
  }
  div::-webkit-scrollbar-track{
    background: rgb(239, 239, 239);
    border-radius:2px;
  }
  div::-webkit-scrollbar-thumb{
    background: #bfbfbf;
    border-radius:10px;
  }
  div::-webkit-scrollbar-thumb:hover{
    background: #1C7CD5;
  }
  div::-webkit-scrollbar-corner{
    background: #179a16;
  }
  .fence-add{
    position: absolute;
    left: 622px;
    top: 84px;
    z-index: 999;
  }
  .fence-form {
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 445px;
  }
  .fence-form .el-input__inner{
    border-radius: 1px
  }
  .fence-form .el-input--prefix .el-input__inner {
    padding-left: 10px;
  }
  .fence-form .el-input__prefix{
    left: 145px;
  }

  .fence-form-edit {
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 445px;
  }
  .fence-form-edit .el-input__inner{
    border-radius: 1px
  }
  .fence-form-edit .el-input--prefix .el-input__inner {
    padding-left: 10px;
  }
  .fence-form-edit .el-input__prefix{
    left: 145px;
  }
  .el-table{
    font-family: "Microsoft YaHei" ! important;
    font-size: 10px;
    font-weight: 500;
    color: #000;
  }
  .el-table td, .el-table th{
    padding: 3px 0;
  }
  .el-table-column--selection .cell{
    padding-left: 10px;
  }
  .el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
    background-color: #2aca76 !important;
  }
  /*element鼠标滑过高亮显示的颜色也太淡*/
  .el-table__body tr:hover>td {
    background-color: #3dc7ab !important;
  }
</style>
